<template>
  <div class="my-through-pass">
    <el-table
      :data="handle_rate"
      style="width:100%"
      height="190px"
      show-summary
      :summary-method="getSummaries"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column prop="zone" label="区域" width="100"> </el-table-column>
      <el-table-column prop="through_pass" label="直塞" sortable width="115">
      </el-table-column>
      <el-table-column
        prop="passAccuracy"
        label="成功直塞"
        sortable
        width="115"
      >
      </el-table-column>
      <el-table-column prop="rate" label="成功率" sortable width="115">
      </el-table-column>
      <el-table-column prop="keyPass" label="关键直塞" sortable width="115">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ThroughPassTableData",
  props: {
    table: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },

    //设置表头的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return { "background-color": "#F1F6F9" };
    },

    //合计规则函数
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        const values = data.map((item) => {
          return item[column.property];
        });
        switch (index) {
          //第一列 '合计/均值'
          case 0:
            sums[index] = "合计/均值";
            break;
          //第4列  成功率是求均值
          case 3:
            //合计规则不是简单求和 而是求平均值
            //reduce记得给个初始的累加值,否则第一个数没有经过处理直接用 '79.0%'去计算
            const values_sum = values.reduce(
              (accumulator, currentValue) =>
                accumulator + parseFloat(currentValue),
              0
            );
            //求平均数
            sums[index] = values_sum / values.length;
            //四舍五入
            sums[index] = Math.round(sums[index] * 10) / 10 + "%";
            break;
          //剩下所有列 默认是求和
          default:
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
        }
      });
      return sums;
    },
  },
  computed: {
    handle_rate() {
      return this.table.map((item) => {
        return {
          ...item,
          rate: parseInt(item.rate * 100) + "%",
        };
      });
    },
  },
};
</script>

<style scoped>
.my-through-pass {
  width: 560px;
  height: 190px;
  color: #656f73;
  background-color: blue;
}
.el-table {
  /*margin-top: 5px;*/
  /*border-color: red;*/
  font-size: 11px;
  /*line-height: 10px;*/
  background-color: #b500fe;
  /*font-weight: bold;*/
}
.my-through-pass /deep/ .el-table td {
  padding: 6px 0;
}
.my-through-pass /deep/ .is-leaf {
  padding: 5px 0;
}
</style>
